<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>猎舞网</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
	/>
	<meta name="description" content="">
	<link rel="stylesheet" href="__PUBLIC__static/lib/weui.min.css">
	<link rel="stylesheet" href="__PUBLIC__static/css/jquery-weui.css">
	<link rel="stylesheet" href="__PUBLIC__static/css/style.css">
	<style type="text/css">
		body {
			display: flex;
			flex-direction: column;
			width: 100%;
			height: 100vh;
			background-image: url(__PUBLIC__static/images/bg.png);
			background-size: 100% 95%;
			background-position: 0px 96%;
			background-repeat: no-repeat;
		}

		.lg-title {
			position: relative;
			width: 100%;
			height: 56px;
			background-color: black;
		}

		.backw {
			position: absolute;
			width: 30px;
			top: 25%;
			left: 9px;
		}

		.lg-title span {
			font-family: FZLTZHK;
			font-size: 22px;
			color: #FFFFFF;
			line-height: 56px;
		}

		.img {
			position: absolute;
			width: 100%;
			text-align: center;
			top: 13%;
		}

		.liewuimg {
			width: 100px;
		}

		.login-form {
			position: absolute;
			width: 100%;
			margin: 50% auto;
		}

		.phone {
			width: 100%;
			border-bottom: 1px solid #E0E0E0;
			position: relative;
			margin-bottom: 20px;
		}

		.phone p {
			float: left;
			color: #333333;
			margin-right: 20px;
			margin-top: 5px;
			font-family: simhei[Regular];
			font-size: 18px;
		}

		.phone input {
			margin-top: 5px;
			float: left;
			border: none;
			height: 32px;
			font-size: 14px;
		}

		.phone input:focus {
			outline: none;
		}

		#zhuce {
			position: absolute;
			width: 95%;
			top: 200px;
			left: 10px;
			height: 65px;
			background: url("__PUBLIC__static/images/zhuce2.png") no-repeat;
			background-size: 100%;
			border: none;
		}

		.phone i img {
			position: absolute;
			right: 30px;
			top: 10px;
			width: 25px;
		}

		.getyanz {
			position: absolute;
			right: 10px;
			top: 0px;
		}
	</style>
</head>

<body ontouchstart>
	<!--主体-->
	<div class="login-box">
		<div class="lg-title">
			<img class="backw" src="__PUBLIC__static/images/backwhite.png" alt="" />
			<span>猎舞网</span>
		</div>
		<div class="img">
			<img class="liewuimg" src="__PUBLIC__static/images/logo.png" />
		</div>
		<div class="login-form">

				<div class="login-user-name common-div">
					<div class='phone clear'>
						<p>手机号</p>
						<input id="mobile" type="text" placeholder="">
					</div>
				</div>
				<div class='phone clear'>
					<p>验证码</p>
					<input type="text" id="code" placeholder="">
					<input type="button" class="getyanz" value="获取验证码">
				</div>
				<div class="login-user-pasw common-div">
					<div class='phone clear'>
						<p>密&nbsp;&nbsp;&nbsp;码</p>
						<input id="password" type="password" placeholder="">
						<i onclick="change()">
							<img src="__PUBLIC__static/images/zhengkai.png" />
						</i>
					</div>
				</div>
				<input id="zhuce" type="button" />

		</div>
	</div>
	<script src="__PUBLIC__static/lib/jquery-2.1.4.js"></script>
	<script src="__PUBLIC__static/lib/fastclick.js"></script>
	<script type="text/javascript" src="__PUBLIC__static/js/jquery.Spinner.js"></script>
	<script src="__PUBLIC__static/js/jquery-weui.js"></script>
	<script type="text/javascript">
		$(".backw").on("click", function () {
			window.history.back(-1);
		});
		$("#zhuce").on("click", function () {
			$.ajax({
				type: 'POST',
				url: "reg",
				data: {
					mobile: $("#mobile").val(),
					code: $("#code").val(),
					password: $("#password").val(),
				},
				dateType: "json",
				success: function (xhr) {
					switch (xhr.status) {
						case 1:
							$res = confirm(xhr.message);
							if ($res) {
								window.location.href = "../../home/Users/index";
							} else {
								window.location.href = "../../home/Content/index";
							}
							break;
						case 0:
							alert(xhr.message);
							window.location.reload();
							break;
						case -1:
							alert(xhr.message);
							window.location.reload();
							break;
						case -2:
							alert("验证码获取失败");
							window.location.reload();
							break;
					}
				}
			})
		});

		//点击发送验证码按钮，开始计时
		var InterValObj; //timer变量，控制时间
		var count = 30; //间隔函数，1秒执行
		var curCount; //当前剩余秒数

		//点击发送验证码
		$(".getyanz").on("click", function () {

			var number = $("#mobile").val(); //获取手机号码

			if (validatemobile(number) !== false) {
				curCount = count;
				//设置button效果，开始计时
				$(".getyanz").attr("disabled", "true");
				$(".getyanz").val(+curCount + "秒再获取");
				InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
				//向后台发送处理数据

				//ajax异步发送
				$.ajax({
					url: "sms", //请求地址，html页面传过来的
					type: "post",
					data: {
						number: number
					},
					success: function (res) {
						alert("短信验证码发送成功！");
					},
				});

			}
		});

		function SetRemainTime() {
			if (curCount == 0) {
				window.clearInterval(InterValObj); //停止计时器
				$(".getyanz").removeAttr("disabled"); //启用按钮
				$(".getyanz").val("重新发送验证码");
			} else {
				curCount--;
				$(".getyanz").val(+curCount + "秒再获取");
			}
		}
		//验证手机号规则
		function validatemobile(mobile) {
			if (mobile.length == 0) {
				alert('请输入手机号码！');
				return false;
			}
			if (mobile.length != 11) {
				alert('请输入有效的手机号码！');
				return false;
			}

			var myreg = /^(((13[0-9]{1})|15[0-9]{1}|153|182)+\d{8})$/;
			if (!myreg.test(mobile)) {
				alert('请输入有效的手机号码！');
				return false;
			}
		}
		var isShow = true;
		function change() {
			var v = document.getElementById("password");
			if (isShow) {
				v.type = "text";
				isShow = false;
			} else {
				v.type = "password";
				isShow = true;
			}
		};
	</script>
</body>

</html>